<!-- 确认订单 -->
<template>
    <page-view>
        <div class="w-full  my-shop-car-header bg-white   border-solid border-b-[2px] border-[#ff0000]">
            <div class="base-width py-[20px] flex flex-row justify-between ">
                <div class="flex flex-row items-end">
                    <img src="../../img/logo.png" class="w-[56px] h-[56px] cursor-pointer"
                        @click="$router.push({ name: 'DataView' })" alt="">
                    <div class="flex-1 flex flex-row items-baseline ml-[40px]">
                        <div class="text-[22px]">确认订单</div>
                    </div>
                </div>
                <div class="flex flex-row items-center ">
                    <el-dropdown>
                        <span class="el-dropdown-link text-gray-500 font-bold">

                            {{ loginClientInfo.custom_realName }}

                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>人个中心</el-dropdown-item>
                                <el-dropdown-item divided @click="logOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>

                    </el-dropdown>
                    <span class="mx-2 text-gray-400">|</span>
                    <span class="mx-2 text-gray-500">我的订单</span>
                </div>
            </div>
        </div>
        <!-------------------------------------------------------->

        <div class="base-width bg-gray-100 overflow-auto">
            <div class="base-width bg-white m-auto mt-[20px] flex flex-row items-center p-[20px]">
                <div class="flex flex-row  text-[85px] ">
                    <el-icon>
                        <SuccessFilled class=" text-green-500" />
                    </el-icon>
                </div>
                <div class="flex-1 text-[14px] text-gray-600 ml-[20px] leading-8">
                    <p class="text-[22px] text-gray-800">订单提交成功！去支付喽~</p>
                    <p>请在 <span class="text-[#22c55e]">2小是0分内完成支付，超时后将取消订单</span></p>
                    <p>收货地址：{{ currentOrderInfo.addressInfo?.address_name }}
                        {{ maskTel(currentOrderInfo.addressInfo?.address_tel) }}
                        {{
                                [currentOrderInfo.addressInfo?.province, currentOrderInfo.addressInfo?.city,
                                currentOrderInfo.addressInfo?.area, currentOrderInfo.addressInfo?.address_detail].join(" ")
                        }}</p>
                </div>
                <div class="text-[14px] text-gray-600">
                    <div>订单总金额：<span class="text-primary text-[22px]">{{ totalMoney }}</span><span
                            class="text-primary">元</span></div>
                    <div>订单详情</div>
                </div>
            </div>
            <div class="base-width bg-white my-[20px] m-auto p-[20px]">
                <h2 class="border-b border-solid border-gray-200 pb-5">请选择以下支付方式支付</h2>
                <div class="pay-type-list">
                    <div class="w-[180px] h-[60px] border border-solid border-gray-200" @click="toAliPay">
                        <img src="../../img/支付宝.png" class="block w-full h-full" alt="">
                    </div>
                    <div class="w-[180px] h-[60px] border border-solid border-gray-200">
                        <img src="../../img/微信.jpg" class="block w-full h-full" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-------------------------------------------------------->
        <footer-menu></footer-menu>


    </page-view>
</template>
<script setup>
import { ref, inject, computed, reactive } from "vue";

import { ArrowDown, Close, CirclePlus, SuccessFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import API from "../../utils/API";
import { ElMessageBox } from "element-plus";
import { mainStore } from "../../store";
import {maskTel} from "../../utils/StringUtils"
const drawer = ref(false);
const baseURL = inject("baseURL");
const router = useRouter();
const route = useRoute();
const store = mainStore();
const loginClientInfo = ref(mainStore().loginClientInfo);

/**
 * 根据订单编号查询当前订单的信息
 */
 const isLoading = ref(false);
const currentOrderInfo = ref({});
const totalMoney = ref(0);
const findById = id => {
  isLoading.value = true;
  API.orderInfo.findById(id).then(result => {
    currentOrderInfo.value = result;
    result.orderDetailInfoList.forEach(item => {
      totalMoney.value += item.goodsInfo.goods_sale_price * item.goods_num;
    });
  })
      .finally(() => {
        isLoading.value = false;
      });
}
findById(route.params.id);


/**
 * 去调用阿里的支付宝接口
 */
const toAliPay = () => {
  let id = route.params.id;
  if (id) {
    isLoading.value = true;
    API.orderInfo.aliPay(id)
        .then(result => {
          location.href = result;
        })
        .finally(() => {
          isLoading.value = false;
        });
  } else {
    ElMessageBox.alert("订单号不存在，请重新下单", "提示", {
      type: "error"
    })
        .then(() => {
          router.replace({name: "DataView"});
        })
  }
}


/**
 * 右上角的下拉菜单点击以后的事件
 */
const dropdownCommand = (command) => {
  if (command === "customCenter") {
    router.push({name: "customInfo"})
  } else if (command === "clientLogOut") {
    clientLogOut();
  }
}

/**
 * 退出登录
 */
const logOut = () => {
    ElMessageBox.confirm("确定要退出登录吗？", "询问", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(() => {
            store.logOut();
            router.replace({ name: "Login" })
        })
        .catch(() => {
            console.log("取消退出登录");
        })
}
</script>
<style scoped lang="scss">
.active {
    @apply border-red-600 border-[3px]
}

.grid-item {
    .update-button {
        bottom: 6px;
        right: 10px;
    }
}
.pay-type-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  grid-gap: 20px;
  box-sizing: border-box;
  @apply py-[20px];
  > div {
    @apply cursor-pointer transition-all;
    &:hover {
      border-color: red;
    }
  }
}
</style>
   